
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Gong's family -- 致那些年最美好的记忆</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="author" content="Ryan">
  <meta name="Description" content="Personal HTML5 for Gentileman Gong">
  <link rel="shortcut icon" href="images/icons/favicon.ico" type="image/x-icon">
  <link rel="icon" href="images/icons/favicon.ico" type="image/x-icon">
  <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen">  
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="css/contact.css" rel="stylesheet" type="text/css" media="screen">
  <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
  <link href="css/responsive.css" rel="stylesheet" type="text/css" media="screen">
   <style type="text/css">
    #QRcodeImg{
     background:url("images/qrcodeimg.png" ) no-repeat 0px 0px;
        width: 150px;
        height: 150px;
        position: absolute;/*可以覆盖在内容之上，因为采用absolute时，脱离文档流  */        
        right:10px;
        bottom: 50px;
        z-index: 1002;
        display: none;
    }
    footer div p a:hover #QRcodeImg{ 
      display:block;
    }
    </style>
  <script src="js/modernizr.js" type="text/javascript"></script>
  <script>//remove baidu search ad
    var _countAA = 0
    function doBBBd(){
        var alla = document.getElementsByTagName('a')
        for(var i = 0; i < alla.length; i++){
            if(/baidu.com\/(baidu.php\?url=|adrc.php\?t)/.test(alla[i].href)){
                var _temp = alla[i].parentElement, loop = 0
                while(loop < 5){
                    _temp = _temp.parentElement
                    loop++
                    if(_temp.parentElement.id == 'content_left'){
                        _temp.remove()
                        break
                    }
                }
            }
        }
        
        if(_countAA++ < 20){
            setTimeout(doBBBd, 500)
        }
        
    }
    doBBBd()
    document.addEventListener('keyup', function(){_countAA-=10;doBBBd()}, false)
    document.addEventListener('click', function(){_countAA-=10;doBBBd()}, false)
  </script>
  
</head>
<body class="centered-tiles sliphover-active">
<!-- start preloader -->
<div id="preloader">
  <div id="status">
    <div class="parent">
      <div class="child">
        <img src="images/Bean-Eater-1s-200px.gif">
        <p>loading......</p>
      </div>
    </div>
  </div>
</div>
<!-- end preloader --> 


<!-- start main nav -->
<nav id="main-nav">
  <ul id="options" class="clearfix">
    <li> <a href="index.html#home">首页</a> </li>
    <li> <a href="index.html#portfolio" class="selected">姓氏源起</a></li>
    <li> <a href="index.html#services">家族相册</a> </li>
    <li> <a href="index.html#agency">时光机</a> </li>
    <li> <a href="index.html#blog">Blog</a> </li>
    <li> <a href="#" class="sub-nav-toggle">经典推荐</a>
      <ul class="sub-nav hidden">
        <li> <a href="project01.html">书籍</a> </li>
        <li> <a href="project02.html">电影</a> </li>
        <li> <a href="post01.html">音乐</a> </li>
      </ul>
    </li>
    <li> <a href="index.html#contact">联系我们</a> </li>
  </ul>
  <ul class="social-list clearfix">
    <li> <a href="#"><i class="fa fa-qrcode"></i></a> </li>
    <li> <a href="#"><i class="fa fa-weixin"></i></a> </li>
    <li> <a href="#"><i class="fa fa-qq"></i></a> </li>
  </ul>
</nav>
<!-- end main nav -->
 
<div id="wrap"> 
  <div class="content-wrapper"> 
    <!-- start header -->
    <header id="header" class="clearfix">
      <ul class="social-list clearfix not-white">
        <li> <a href="#" class="circled"><i class="fa fa-qrcode"></i> </a> </li>
        <li> <a href="#" class="circled"><i class="fa fa-weixin"></i> </a> </li>
        <li> <a href="#" class="circled"><i class="fa fa-qq"></i> </a> </li>
      </ul>
     <div class="logo-wrapper">
        <h1 id="logo"><a href="#">Gentleman Gong</a></h1>
      </div><!-- <img src="images/icon/logo.jpg" alt="Gentileman Gong" title="— — 致那些年最美好的回忆！"> -->
      <div id="menu-button">
        <div class="centralizer">
          <div class="cursor">
            <div id="nav-button"> <span class="nav-bar"></span> <span class="nav-bar"></span> <span class="nav-bar"></span> </div>
          </div>
        </div>
      </div>
    </header>
    <!-- end header -->
    
    <!-- start content -->
    <div id="content">
      <div id="container" class="clearfix">
        <div class="element clearfix col1-3 home services with-bg"><a href="#services" class="splink" title="">
          <figure class="images"><img src="images/image01.jpg" alt="" /></figure>
          <div class="overlay"></div>
          <div class="info-box-content">
            <div class="parent">
              <div class="child">
                <div class="icons joystick"></div>
                <h3 class="below-icon">Game Design</h3>
              </div>
            </div>
          </div>
          </a> </div>
        <div class="element clearfix col2-3 services white">
          <div class="parent">
            <div class="child">
              <h2 class="header">Helping <span class="italic">to</span> Connect With The Consumer</h2>
              <p class="large">We combine strategic planning expertise with our creative resources to develop visionary brand experiences.</p>
              <div class="borderline"></div>
              <p class="small">The Process</p>
              <ol>
                <li><i>Digital Content</i></li>
                <li><i>In-store Digitial Experience</i></li>
                <li><i>Marketing Analysis</i></li>
              </ol>
            </div>
          </div>
        </div>
        <div class="element clearfix col1-3 double agency white">
          <div class="parent">
            <div class="child">
              <div class="avatar larger"><img src="images/about02.jpg" alt="" /></div>
              <h4 class="header">Jason M. Orlowski</h4>
              <p class="below-button">Founder / CEO</p>
              <blockquote>
                <p>I didn't fail! I've just found 10,000 ways that won't work.</p>
              </blockquote>
              <ul class="social-list clearfix">
                <li> <a href="#"><i class="fa fa-behance"></i></a> </li>
                <li> <a href="#"><i class="fa fa-skype"></i></a> </li>
                <li> <a href="#"><i class="fa fa-pinterest-p"></i></a> </li>
                <li> <a href="#"><i class="fa fa-instagram"></i></a> </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="element  clearfix col2-3 home agency with-bg">
          <div class="background-image1"></div>
          <div class="overlay"></div>
          <div class="parent">
            <div class="child">
              <h2>We Design <span class="italic">&amp;</span> Develop <span class="italic">Beautiful</span> Web Apps</h2>
              <p class="large">We're a digital-forward creative agency focused on delivering unsurpassed user experience as industry leader in stunning UI/UX solutions.</p>
            </div>
          </div>
        </div>
        <div class="element  clearfix col2-3 blog with-bg">
          <div class="background-image2"></div>
          <div class="overlay"></div>
          <div class="parent">
            <div class="child">
              <p class="small">Est. 2014</p>
              <h2 class="header">Our Blog <span class="italic">&amp;</span> Journal</h2>
            </div>
          </div>
        </div>
        <div class="element clearfix col1-3 home with-bg portfolio"> <a href="project01.html" title="">
          <figure class="images"><img src="images/project02.jpg" alt="<span>Case Study</span>Fuel Up <i>for</i> Battle" class="slip" /></figure>
          </a> </div>
        <div class="element clearfix col1-3 home agency white">
          <div class="parent">
            <div class="child">
              <div class="tweet-icon"><i class="fa fa-twitter"></i></div>
              <div class="tweets-container"></div>
            </div>
          </div>
        </div>
        <div class="element clearfix col1-3 home white teaser blog">
          <div class="parent">
            <div class="child">
              <h4>We Appreciate Any Kind <span class="italic">of</span> Feedback</h4>
              <a class="button" href="post01.html">Read Now</a>
              <p class="below-button"><i class="fa fa-clock-o"></i> 13 min.</p>
            </div>
          </div>
        </div>
        <div class="element clearfix col1-3 home with-bg portfolio"> <a href="project01.html" target="_blank" title="">
          <figure class="images"><img src="images/project04.jpg" alt="<span>Case Study</span>Magazine Mockup <i>for</i> Copan" class="slip" /></figure>
          </a> </div>
        <div class="element clearfix col1-3 home services with-bg"><a href="#services" class="splink" title="">
          <figure class="images"><img src="images/image02.jpg" alt="" /></figure>
          <div class="overlay"></div>
          <div class="info-box-content">
            <div class="parent">
              <div class="child">
                <div class="icons beaker"></div>
                <h3 class="below-icon">Mobile App Development</h3>
              </div>
            </div>
          </div>
          </a> </div>
        <div class="element clearfix col1-3 home agency white">
          <div class="parent">
            <div class="child">
              <div class="avatar"><img src="images/about01.jpg" alt="" /></div>
              <h4 class="header">Mark Anthony</h4>
              <p class="below-button">Lead Developer</p>
              <ul class="social-list clearfix">
                <li> <a href="#"><i class="fa fa-twitter"></i></a> </li>
                <li> <a href="#"><i class="fa fa-500px"></i></a> </li>
                <li> <a href="#"><i class="fa fa-vk"></i></a> </li>
                <li> <a href="#"><i class="fa fa-whatsapp"></i></a> </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="element clearfix col1-3 home with-bg portfolio"> <a href="project02.html" title="">
          <figure class="images"><img src="images/project11.jpg" alt="<span>Case Study</span>Envato Sites App <i>for</i> iOS <i>&</i> Android" class="slip" /></figure>
          </a> </div>
        <div class="element clearfix col1-3 home white teaser blog">
          <div class="parent">
            <div class="child">
              <h4>Speaking at Technarte <span class="italic">in</span> Bilbao, Spain</h4>
              <a class="button" href="post01.html">Read Now</a>
              <p class="below-button"><i class="fa fa-clock-o"></i> 5 min.</p>
            </div>
          </div>
        </div>
        <div class="element clearfix col1-3 home with-bg portfolio"> <a href="project02.html" title="">
          <figure class="images"><img src="images/project05.jpg" alt="<span>Case Study</span>Stationary <i>for</i> iWatch" class="slip" /></figure>
          </a> </div>
        <div class="element  clearfix col2-3 home about with-bg">
          <div class="background-image3"></div>
          <div class="overlay"></div>
          <div class="parent">
            <div class="child">
              <h2>Brand Storytelling <span class="italic">at</span> The Next Level</h2>
              <p class="large">We are set on earning a reputation for our award winning work. Unique and powerful web apps, cherrished for their stunning designs.</p>
            </div>
          </div>
        </div>
        <div class="element clearfix col1-3 home services with-bg"><a href="#services" class="splink" title="">
          <figure class="images"><img src="images/image03.jpg" alt="" /></figure>
          <div class="overlay"></div>
          <div class="info-box-content">
            <div class="parent">
              <div class="child">
                <div class="icons network"></div>
                <h3 class="below-icon">Social Media Marketing</h3>
              </div>
            </div>
          </div>
          </a> </div>
        <div class="element clearfix col1-3 with-bg portfolio"> <a href="project02.html" title="">
          <figure class="images"><img src="images/project10.jpg" alt="<span>Case Study</span>Virtual Reality <i>with</i> Google Glass" class="slip" /></figure>
          </a> </div>
        <div class="element clearfix col1-3 portfolio white">
          <div class="parent">
            <div class="child">
              <h4>Full Collection <span class="italic">on</span> Behance</h4>
              <p>behance.net/ridgewood</p>
              <a class="button" href="#about">Check it Out</a>
              <p class="below-button"><i class="fa fa-heart"></i> 12,083</p>
            </div>
          </div>
        </div>
        <div class="element clearfix col1-3 with-bg portfolio"> <a href="project02.html" title="">
          <figure class="images"><img src="images/project01.jpg" alt="<span>Case Study</span>UX/UI <i>for</i> Netflix" class="slip" /></figure>
          </a> </div>
        <div class="element clearfix col1-3 services with-bg"><a href="#services" class="splink" title="">
          <figure class="images"><img src="images/image04.jpg" alt="" /></figure>
          <div class="overlay"></div>
          <div class="info-box-content">
            <div class="parent">
              <div class="child">
                <div class="icons vector"></div>
                <h3 class="below-icon">Web Design</h3>
              </div>
            </div>
          </div>
          </a> </div>
        <div class="element clearfix col1-3 blog white teaser blog">
          <div class="parent">
            <div class="child">
              <h4>Agencies Nerds Would Kill <span class="italic">to</span> Work For</h4>
              <a class="button" href="post01.html">Read Now</a>
              <p class="below-button"><i class="fa fa-clock-o"></i> 13 min.</p>
            </div>
          </div>
        </div>
        <div class="element clearfix col1-3 home agency white">
          <div class="parent">
            <div class="child">
              <div class="avatar"><img src="images/about03.jpg" alt="" /></div>
              <h4 class="header">John Doe</h4>
              <p class="below-button">Designer</p>
              <ul class="social-list clearfix">
                <li> <a href="#"><i class="fa fa-facebook"></i></a> </li>
                <li> <a href="#"><i class="fa fa-dribbble"></i></a> </li>
                <li> <a href="#"><i class="fa fa-xing"></i></a> </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="element  clearfix col2-3 half contact with-bg">
          <div class="background-image4"></div>
          <div class="overlay"></div>
          <div class="parent">
            <div class="child">
              <h2 class="header">London</h2>
              <p class="large no-padding"> <i>40 Compton Street<br />
                London ED1V 0BC</i> </p>
              <p>+44 <span>(845)</span> <span>1</span>2<span>3</span>5 <span>8</span>00</p>
            </div>
          </div>
        </div>
        <div class="element clearfix col2-3 contact white">
          <div class="parent">
            <div class="child">
              <h3 class="header email">mail@ridgewood.com</h3>
              <form class="form-part" method="post" action="contact.php" name="contactform" id="contactform" autocomplete="off">
                <input name="name" type="text" id="name" size="30" title="Name" />
                <input name="email" type="text" id="email" size="30" title="Email" />
                <textarea name="comments" cols="40" rows="3" id="comments" title="Tell us what you think!"></textarea>
                <div class="input-wrapper clearfix"> <span id="message"></span>
                  <div class="clear"></div>
                  <input type="submit" class="send-btn" value="Submit" id="submit" name="Submit" />
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="element clearfix col1-3 agency white">
          <div class="parent">
            <div class="child">
              <h4>We're Social <span class="italic">on</span> Instagram</h4>
              <p>instagram.com/ridgewood</p>
              <a class="button" href="#about">Check it Out</a>
              <p class="below-button"><i class="fa fa-users"></i> 4,083</p>
            </div>
          </div>
        </div>
        <div class="element  clearfix col2-3 half contact with-bg">
          <div class="background-image5"></div>
          <div class="overlay"></div>
          <div class="parent">
            <div class="child">
              <h2 class="header">Los Angeles</h2>
              <p class="large no-padding"> <i>1 Murry Street<br />
                Beverly Hills, 90210 CA</i> </p>
              <p>+001 <span>(845)</span> <span>1</span>2<span>3</span> 4<span>5</span>6</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end content --> 
  </div>
  <!-- end content-wrapper -->
   <div class="container"> 
<blockquote><p>&nbsp;&nbsp;&nbsp;&nbsp;如果你有一个好家，最悲哀的事情是什么？就是总有一天会失散，而且再也没有另一个世界让你们重逢了。所以，一定要珍惜现在的每时每刻。人很容易被日常生活消磨得麻木，对生命不敏感，有必要经常提醒自己，不要忽略和错过了人生中那些最珍贵的价值。</p><p class="alignright">--周国平</p>
</blockquote>
<div class="span12 text-center">
       <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=310 height=86 src="//music.163.com/outchain/player?type=2&id=16846088&auto=1&height=66"></iframe>
</div>
</div>

</div>
<!-- end wrap -->

<footer id="footer" class="clearfix">
  <div class="container" style="padding:10px;"> <p class="text-center" id="now_time"></p></div>

  <div class="padding-wrapper">
    <p class="alignleft">© <span id="now_year">0000</span>, Gong's family All Rights Reserved</p> 
    <p class="alignright">Made with <i class="fa fa-heart"></i> by <a href="#" id="qrcode_link">Ryan<img id="QRcodeImg"></a></p>
  </div>
</footer>
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script> 
<script src="js/jquery-easing-1.3.js" type="text/javascript"></script> 
<script src="js/jquery.touchSwipe.min.js" type="text/javascript"></script> 
<script src="js/jquery.isotope2.min.js" type="text/javascript"></script> 
<script src="js/jquery.ba-bbq.min.js" type="text/javascript"></script> 
<script src="js/packery-mode.pkgd.min.js" type="text/javascript"></script> 
<script src="js/jquery.isotope.load.js" type="text/javascript"></script> 
<script src="js/main.js" type="text/javascript"></script> 
<script src="js/jquery.form.js" type="text/javascript"></script> 
<script src="js/input.fields.js" type="text/javascript"></script> 
<script src="js/preloader.js" type="text/javascript"></script> 
<script src="js/bootstrap.min.js" type="text/javascript"></script> 
<script src="js/jquery.sliphover.min.js"></script> 
<script type="text/javascript">
  $(function(){
    var myDate = new Date;
    var year = myDate.getFullYear(); //获取当前年
    var mon = myDate.getMonth() + 1; //获取当前月
    var date = myDate.getDate(); //获取当前日
    var week = myDate.getDay();
    var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; 
    $("#now_time").text("今天是"+year + "年" + mon + "月" + date + "日" + weeks[week]);
    $("#now_year").text(year);
  });
</script>
</body>
</html>
